<template>
    <div>
        <div style="float: left; width: 450px; background-color: #f5f5f5">
            <el-form :inline="true" :model="from" style="width: 400px; margin-left: 25px">
                <el-form-item><h2 style="color: #66cdaa;width:300px">患者信息</h2></el-form-item>
                <el-form-item>
                    <el-button @click="calling">获取</el-button>
                </el-form-item>
                <br/>
                <el-form-item label="姓名">
                    <el-input v-model="from.name" style="width: 200px" disabled></el-input>
                    <!-- <el-input v-model="from.name" style="width:200px;" @focus="hzxinxi = true"></el-input>
                  <el-dialog title="患者信息" :visible.sync="hzxinxi" width="70%">
                    <el-form :inline="true" >
                      <el-form-item label="患者姓名">
                        <el-input placeholder="患者姓名" v-model="name"></el-input>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="primary" @click="gethz()">查询</el-button>
                      </el-form-item>
                    </el-form>
                     <el-table :data="huanzhe" @row-click="handleRowClick">
                      <el-table-column prop="id" label="主键" v-if="false"></el-table-column>
                      <el-table-column prop="name" label="患者姓名"></el-table-column>
                      <el-table-column prop="sex" label="性别"> </el-table-column>
                      <el-table-column prop="mobile" label="电话"> </el-table-column>
                      <el-table-column prop="update_time" label="更新日期"> </el-table-column>
                    </el-table>
                  </el-dialog> -->
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="from.sex" style="width: 90px" disabled></el-input>
                </el-form-item>
                <el-form-item label="生日">
                    <el-date-picker
                            v-model="from.birthday"
                            type="date"
                            style="width: 200px" @focus="getage" disabled
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="年龄">
                    <span>{{age}}岁</span>
                </el-form-item>
                <el-form-item label="手机">
                    <el-input v-model="from.mobile" style="width: 250px" maxlength="11" show-word-limit
                              disabled></el-input>
                </el-form-item>
                <el-form-item label="住址">
                    <el-input v-model="from.address" type="textarea" style="width: 400px" maxlength="100"
                              show-word-limit disabled></el-input>
                </el-form-item>
                <el-form-item label="过敏史">
                    <el-input v-model="from.allergyInfo" type="textarea" style="width: 400px" maxlength="500"
                              show-word-limit disabled></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleResolve">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="float: left">
            <el-tabs type="border-card" stretch>
                <el-tab-pane label="病例" style="width: 775px">
                    <el-form :inline="true" :model="from1">
                        <el-form-item><h3 style="color: #66cdaa">诊断信息</h3></el-form-item
                        >
                        <br/>
                        <el-form-item label="发病日期">
                            <el-date-picker v-model="from1.fbdate" type="date"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="接诊类型">
                            <el-select v-model="from1.typeId" style="width: 150px">
                                <el-option :value="0" label="初诊"></el-option>
                                <el-option :value="1" label="复诊"></el-option>
                                <el-option :value="2" label="急诊"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否传染">
                            <el-select v-model="from1.isContagious" style="width: 150px">
                                <el-option :value="0" label="不是"></el-option>
                                <el-option :value="1" label="是"></el-option>
                            </el-select>
                        </el-form-item
                        >
                        <br/>
                        <el-form-item label="主诉">
                            <el-input
                                    v-model="from1.caseTitle"
                                    type="textarea"
                                    style="width: 750px"
                                    placeholder="填写主诉病状(限500字)"
                                    maxlength="500" show-word-limit
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="诊断详情">
                            <el-input
                                    v-model="from1.caseResult"
                                    type="textarea"
                                    style="width: 750px"
                                    placeholder="填写本次诊断详情(限500字)"
                                    maxlength="500" show-word-limit
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="医生建议">
                            <el-input
                                    v-model="from1.doctorTips"
                                    type="textarea"
                                    style="width: 750px"
                                    placeholder="医生建议(限500字)"
                                    maxlength="500" show-word-limit
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input
                                    v-model="from1.memo"
                                    type="textarea"
                                    style="width: 750px"
                                    placeholder="填写备注(限500字)"
                                    maxlength="500" show-word-limit
                            ></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="处方" style="width: 775px">
                    <el-tabs
                            v-model="editableTabsValue"
                            type="card"
                            editable
                            @edit="handleTabsEdit">
                        <el-tab-pane
                                :key="item.label"
                                v-for="(item,index) in careOrders"
                                :label="item.label"
                                :name="item.label">
                            <el-table :data="item.hisCareOrderSubs" border style="width: 100%">
                                <el-table-column
                                        fixed
                                        type="index"
                                        label="序号">
                                </el-table-column>
                                <el-table-column
                                        prop="goodsName"
                                        label="药品名">
                                </el-table-column>
                                <el-table-column
                                        prop="num"
                                        label="数量">
                                    <template slot-scope="scope">
                                        <el-input :disabled="scope.row.typeId !== 0" @blur="handleGetTotal(scope.row)"
                                                  v-model="scope.row.num"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="price"
                                        label="单价">
                                </el-table-column>
                                <el-table-column
                                        prop="amount"
                                        label="金额">
                                </el-table-column>
                                <el-table-column
                                        prop="tips"
                                        label="特殊要求">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.tips"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        fixed="right"
                                        label="操作">
                                    <template slot-scope="scope">
                                        <el-button @click="del(index,scope.row.index)" type="danger" size="small">删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div style="margin-top: 20px">
                                <div>
                                    <el-button @click="drawer = true" type="primary" style="width: 100%;">添加</el-button>
                                </div>
                            </div>
                            <div style="position: relative;left: 20%;margin-top: 10px">
                                <span>
                                    每<el-input-number v-model="item.numA" style="width: 150px;"></el-input-number>
                                </span>
                                <span style="margin-left: 10px">
                                    服用<el-input-number v-model="item.numB" style="width: 150px;"></el-input-number>粒
                                </span>
                                <span style="margin-left: 10px">
                                    服用<el-input-number v-model="item.numC" style="width: 150px;"></el-input-number>天
                                </span>
                            </div>
                            <el-form :inline="true" :model="item">
                                <el-form-item label="服药要求">
                                    <el-input
                                            v-model="item.useTips"
                                            type="textarea"
                                            style="width: 750px"
                                            placeholder="填写服药要求(限500字)"
                                            maxlength="500" show-word-limit
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="中药备注">
                                    <el-input
                                            v-model="item.memo"
                                            type="textarea"
                                            style="width: 750px"
                                            placeholder="填写中药备注(限500字)"
                                            maxlength="500" show-word-limit
                                    ></el-input>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-drawer
                title="我是标题"
                :visible.sync="drawer"
                :with-header="false">
            <el-tabs type="border-card" stretch>
                <el-tab-pane label="中药处方">
                    <el-table :data="pageResult.records" @selection-change="handleSelectionChangeDrugs">
                        <el-table-column type="selection" :selectable="canSelected"></el-table-column>
                        <el-table-column property="medicinesName" label="名称"></el-table-column>
                        <el-table-column property="inventoryUnit" label="规格"></el-table-column>
                        <el-table-column property="inventoryNum" label="库存"></el-table-column>
                        <el-table-column property="inventoryPrescriptionPrice" label="单价"></el-table-column>
                    </el-table>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageResult.current"
                            :page-sizes="[10, 15]"
                            :page-size="pageResult.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageResult.total">
                    </el-pagination>
                    <el-button style="width:100%" type="primary" @click="handleDrugsClick">添加</el-button>
                </el-tab-pane>
                <el-tab-pane label="检查项目">
                    <el-table :data="jc" @selection-change="handleSelectionChangeProject">
                        <el-table-column type="selection"></el-table-column>
                        <el-table-column property="className" label="名称"></el-table-column>
                        <el-table-column property="unitPrice" label="单价"></el-table-column>
                        <el-table-column property="unit" label="最小单位"></el-table-column>
                    </el-table>
                    <el-button style="width:100%" type="primary" @click="handleProjectClick">添加</el-button>
                </el-tab-pane>
            </el-tabs>
        </el-drawer>
    </div>
</template>

<script>

    import CallingService from '../../model/cyh/CallingService.js'
    import {SeeDoctorService} from "../../model/cyh/SeeDoctorService";

    const callingService = CallingService.getInstance()
    const seeDoctorService = SeeDoctorService.getInstance()


    export default {
        data() {
            return {
                drawer: false,
                tabPosition: "病例",
                editableTabsValue: '处方1',
                careOrders: [{
                    hospital_id: 1,
                    index: 0,
                    label: '处方1',
                    doctorId: null,
                    status: '0',
                    hisCareOrderSubs: [],
                    allAmount: 0
                }],
                age: '',
                from: {},
                from1: {
                    addtime: new Date().getTime(),
                    typeId: 0,
                    isContagious: 0,
                    doctorId: '',
                    hospitalId: 1
                },
                from2: {},
                searchForm: {
                    page: 1,
                    size: 10
                },
                pageResult: {},
                jc: {},
                drugsSelection: [],
                hisCareOrderSubList: [],
                projectSelection: []
            };
        },
        created() {
            this.from1.doctorId = sessionStorage.getItem('id') === "undefined" ? null : sessionStorage.getItem('id')
            this.careOrders[0].doctorId = sessionStorage.getItem('id') === "undefined" ? null : sessionStorage.getItem('id')
            this.getPage();
            this.getjc();
        },
        methods: {
            getage() {
                if (this.birthday === null) {
                    this.age = ''
                } else {
                    this.age = this.toAge(this.from.birthday);
                }
            },
            toAge(birthday) {
                let birthDate = this.toDate(birthday).substr(0, 4);
                let newDate = new Date().getFullYear();
                return (newDate - parseInt(birthDate));
            },
            toDate(number) {
                let n = number;
                let date = new Date(n);
                let Y = date.getFullYear() + '/';
                let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
                let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                return (Y + M + D)
            },
            handleTabsEdit(targetName, action) {
                if (action === 'add') {
                    this.careOrders.push({
                        index: this.careOrders.length,
                        label: '处方' + (this.careOrders.length + 1),
                        doctorId: sessionStorage.getItem('id') === "undefined" ? null : sessionStorage.getItem('id'),
                        status: '0',
                        allAmount: 0,
                        hisCareOrderSubs: []
                    });
                    this.editableTabsValue = '处方' + (this.careOrders.length);
                }
                if (action === 'remove') {
                    let index = 0
                    this.careOrders.forEach(item => {
                        if (item.label === targetName) {
                            index = item.index
                        }
                    })
                    for (let i = index + 1; i < this.careOrders.length; i++) {
                        this.careOrders[i].index = this.careOrders[i].index - 1
                        this.careOrders[i].label = '处方' + (this.careOrders[i].index + 1)
                    }
                    if (index + 1 !== this.careOrders.length) {
                        this.editableTabsValue = this.careOrders[index + 1].label
                    }
                    this.careOrders.splice(index, 1)
                }
            },
            calling() {
                callingService.call().then(({data}) => {
                    if (data.code === 0) {
                        console.log(data.data)
                        this.from = data.data
                        if (data.data.sex == 1) {
                            this.from.sex = "男"
                        } else {
                            this.from.sex = "女"
                        }
                        this.from.age = this.getage
                        this.from1.patientId = this.from.patientId
                    } else {
                        this.$message.error({
                            message: data.message,
                            duration: 1000
                        })
                    }
                })
            },
            getPage() {
                callingService.getPage(this.searchForm).then(({data}) => {
                    if (data.code === 0) {
                        this.pageResult = data.data
                    }
                })
            },
            getjc() {
                callingService.getjc().then(({data}) => {
                    this.jc = data.data
                })
            },
            //size改变的方法
            handleSizeChange(size) {
                this.searchForm.size = size
                this.getPage()
            },
            //当前页改变的方法
            handleCurrentChange(page) {
                this.searchForm.page = page
                this.getPage()
            },
            canSelected(row) {
                return (row.inventoryNum - row.lockNum) > row.earlyWarning
            },
            handleSelectionChangeDrugs(selection) {
                this.drugsSelection = selection
            },
            handleDrugsClick() {
                this.careOrders.forEach(item => {
                    if (item.label === this.editableTabsValue) {
                        this.drugsSelection.forEach(item2 => {
                            item.hisCareOrderSubs.push({
                                index: item.hisCareOrderSubs.length,
                                typeId: 0,
                                goodsId: item2.hmrId,
                                goodsName: item2.medicinesName,
                                unit: item2.inventoryuUnit,
                                price: item2.inventoryPrescriptionPrice,
                                num: 0,
                                amount: 0
                            })
                        })
                    }
                })
                this.drawer = false
            },
            handleGetTotal(row) {
                row.amount = row.num * row.price
                this.$forceUpdate()
            },
            handleSelectionChangeProject(selection) {
                this.projectSelection = selection
            },
            handleProjectClick() {
                this.careOrders.forEach(item => {
                    if (item.label === this.editableTabsValue) {
                        this.projectSelection.forEach(item2 => {
                            item.hisCareOrderSubs.push({
                                index: item.hisCareOrderSubs.length,
                                typeId: 2,
                                goodsId: item2.insId,
                                goodsName: item2.inspectionName,
                                price: item2.unitPrice,
                                amount: item2.unitPrice,
                                num: 1
                            })
                        })
                    }
                })
                this.drawer = false
            },
            del(index, index2) {
                const subs = this.careOrders[index].hisCareOrderSubs
                for (let i = index2 + 1; i < subs.length; i++) {
                    subs[i].index = subs[i].index - 1
                }
                subs.splice(index2, 1)
            },
            handleResolve() {
                //计算总价格
                this.careOrders.forEach(item => {
                    let total = 0
                    item.hisCareOrderSubs.forEach(sub => {
                        total += sub.amount
                    })
                    item.allAmount = total
                })
                seeDoctorService.resolve(this.from1,this.careOrders).then(({data}) => {
                    if(data.code === 0){
                        this.$message.success({
                            message:'成功',
                            duration:1000
                        })
                    }
                })
            }
        }
    };
</script>
